<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=8">
		<meta http-equiv="Expires" content="0">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-control" content="no-cache">
		<meta http-equiv="Cache" content="no-cache">
		<title></title>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				// console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
			});
		</script>
	</head>
	<!-- filter: alpha(opacity=50);


opacity: 0.5; -->
	<body>
		<div id="status" style="font-size: 6vw;">（当前模式，从个位数开始）</div>
		<div style="width:100vw;">
			<span style="width:24%;text-align: center;display: inline-block;font-size: 9vw;color: black;">千</span>
			<span style="width:24%;text-align: center;display: inline-block;font-size: 9vw;">百</span>
			<span style="width:24%;text-align: center;display: inline-block;font-size: 9vw;color: black;">十</span>
			<span style="width:24%;text-align: center;display: inline-block;font-size: 9vw;color: black;">个</span>
		</div>
		<div style="width:100vw;">
			<span id="blueqian"
				style="width:24%;text-align: center;display: inline-block;font-size: 9vw;color: blue;">*</span>
			<span id="bluebai"
				style="width:24%;text-align: center;display: inline-block;font-size: 9vw;color: blue;">*</span>
			<span id="blueshi"
				style="width:24%;text-align: center;display: inline-block;font-size: 9vw;color: blue;">*</span>
			<span id="bluege"
				style="width:24%;text-align: center;display: inline-block;font-size: 9vw;color: blue;">*</span>
		</div>

		<div style="width:100vw;">
			<span id="redqian"
				style="width:24%;text-align: center;display: inline-block;font-size: 9vw;color: red;">*</span>
			<span id="redbai"
				style="width:24%;text-align: center;display: inline-block;font-size: 9vw;color: red;">*</span>
			<span id="redshi"
				style="width:24%;text-align: center;display: inline-block;font-size: 9vw;color: red;">*</span>
			<span id="redge"
				style="width:24%;text-align: center;display: inline-block;font-size: 9vw;color: red;">*</span>
		</div>


		<!-- <div style="text-align: center;"> -->
		<div style="width:100vw;">
			<button id="blueButton" onclick="blueFunction()"
				style="font-size: 30px;background-color: blue;color: white;width:48%;border-radius:20px;">点击</button>
			<button id="redButton" onclick="redFunction()"
				style="font-size: 30px;background-color: red;color: white;width:48%;border-radius:20px;">点击</button>
			<p id="result" style="font-size: 25px;color: black;"></p>
		</div>

		<div>
			<button onclick="showFunction()"
				style="font-size: 30px;background-color: orange;color: white;border-radius:20px;">展示结果</button>
			<button onclick="clearFunction()"
				style="font-size: 30px;background-color: orange;color: white;border-radius:20px;">重新开始</button>
		</div>
		<br />
		<div style="width:100vw;">
			<button id="mode" onclick="changeFunction()"
				style="font-size: 30px;background-color: orange;color: white;border-radius:20px;">切换为从千位数开始</button>
		</div>



		<script>
			let type = 1;
			let redNum = 0;
			let blueNum = 0;
			let complete = 0;

			let qianweiblue = "0000"
			let qianweired = "0000"

			function blueFunction() {
				document.getElementById("blueButton").disabled = true;
				document.getElementById("redButton").disabled = false;

				document.getElementById("redButton").style.backgroundColor = "red"
				document.getElementById("blueButton").style.backgroundColor = "lightgray"
				document.getElementById("result").innerText = ""
				let getext = document.getElementById("bluege").innerText;
				let getextNum = Number(getext)

				let shitext = document.getElementById("blueshi").innerText;
				let shitextNum = Number(shitext)

				let baitext = document.getElementById("bluebai").innerText;
				let baitextNum = Number(baitext)

				let qiantext = document.getElementById("blueqian").innerText;
				let qiantextNum = Number(qiantext)



				let random = parseInt(Math.random() * 10);

				if (type == 0) {
					if (qiantext == "*") {
						document.getElementById("blueqian").innerText = random;
					} else {
						if (baitext == "*") {
							document.getElementById("bluebai").innerText = random;
						} else {
							if (shitext == "*") {
								document.getElementById("blueshi").innerText = random;
							} else {
								if (getext == "*") {
									document.getElementById("bluege").innerText = random;
								}
							}
						}
					}
					compare();
					return
				}

				if (getext == "*") {
					document.getElementById("bluege").innerText = random;
				} else {
					if (shitext == "*") {
						document.getElementById("blueshi").innerText = random;
					} else {
						if (baitext == "*") {
							document.getElementById("bluebai").innerText = random;
						} else {
							if (qiantext == "*") {
								document.getElementById("blueqian").innerText = random;
							}
						}
					}
				}



				compare();
			}

			function redFunction() {
				document.getElementById("result").innerText = ""
				document.getElementById("redButton").disabled = true;
				document.getElementById("redButton").style.backgroundColor = "lightgray"
				document.getElementById("blueButton").disabled = false;
				document.getElementById("blueButton").style.backgroundColor = "blue"
				let getext = document.getElementById("redge").innerText;
				let getextNum = Number(getext)

				let shitext = document.getElementById("redshi").innerText;
				let shitextNum = Number(shitext)

				let baitext = document.getElementById("redbai").innerText;
				let baitextNum = Number(baitext)

				let qiantext = document.getElementById("redqian").innerText;
				let qiantextNum = Number(qiantext)

				if (qiantext != "*" && baitext != "*" && shitext != "*" && getext != "*") {
					compare();
					return
				}

				let random = parseInt(Math.random() * 10);

				if (type == 0) {
					if (qiantext == "*") {
						document.getElementById("redqian").innerText = random;
					} else {
						if (baitext == "*") {
							document.getElementById("redbai").innerText = random;
						} else {
							if (shitext == "*") {
								document.getElementById("redshi").innerText = random;
							} else {
								if (getext == "*") {
									document.getElementById("redge").innerText = random;
								}
							}
						}
					}
					compare();
					return
				}

				if (getext == "*") {
					document.getElementById("redge").innerText = random;
				} else {
					if (shitext == "*") {
						document.getElementById("redshi").innerText = random;
					} else {
						if (baitext == "*") {
							document.getElementById("redbai").innerText = random;
						} else {
							if (qiantext == "*") {
								document.getElementById("redqian").innerText = random;
							}
						}
					}
				}

				compare();
			}

			function compare() {

				if (type == 1) {
					//从个位
					let geRedtext = document.getElementById("redqian").innerText;
					let geBluetext = document.getElementById("blueqian").innerText;
					if (!(geRedtext == "*") && !(geBluetext == "*")) {

						compareCurrent();
					} else {

					}

				} else {
					let geRedtext = document.getElementById("redge").innerText;
					let geBluetext = document.getElementById("bluege").innerText;
					if (!(geRedtext == "*") && !(geBluetext == "*")) {
						compareCurrent();
					} else {

					}

				}
				let redgettext = document.getElementById("redge").innerText;
				let redshitext = document.getElementById("redshi").innerText;
				let redbaittext = document.getElementById("redbai").innerText;
				let redqianttext = document.getElementById("redqian").innerText;

				let bluegettext = document.getElementById("bluege").innerText;
				let blueshitext = document.getElementById("blueshi").innerText;
				let bluebaittext = document.getElementById("bluebai").innerText;
				let blueqianttext = document.getElementById("blueqian").innerText;
				// redqianttext = "1"
				// 	redbaittext = "1"
				// 			redshitext = "1"
				// 			blueqianttext = "1"
				// 			bluebaittext = "1"
				// 			blueshitext = "1"
				if (type == 0) {

					if (redqianttext != "*") {
						if (blueqianttext != "*") {

							let redNums = Number(redqianttext)
							let blueNums = Number(blueqianttext)

							redNum = redNums
							blueNum = blueNums
							if (blueNums == redNums) {
								if (redbaittext != "*") {
									if (bluebaittext != "*") {

										let redNumsbai = Number(redbaittext)
										let blueNumsbai = Number(bluebaittext)

										redNum = redNumsbai
										blueNum = blueNumsbai
										if (redNumsbai == blueNumsbai) {
											if (redshitext != "*") {
												if (blueshitext != "*") {

													let redNumsbshi = Number(redshitext)
													let blueNumsshi = Number(blueshitext)

													redNum = redNumsbshi
													blueNum = blueNumsshi
													if (redNumsbshi == blueNumsshi) {
														if (bluegettext != "*") {
															if (redgettext != "*") {

																let redNumsbge = Number(redgettext)
																let blueNumsge = Number(bluegettext)

																redNum = redNumsbge
																blueNum = blueNumsge

																qianweiblue = (blueNumsbai * 100 + blueNums *
																	1000 +
																	blueNumsshi * 10 + blueNumsge)
																qianweired = (redNumsbai * 100 + redNums * 1000 +
																	redNumsbshi *
																	10 + redNumsbge)
																compareQian(redNumsbai * 100 + redNums * 1000 + redNumsbshi *
																	10 + redNumsbge, blueNumsbai * 100 + blueNums * 1000 +
																	blueNumsshi * 10 + blueNumsge)

															}
														}
													} else {
														qianweiblue = (blueNumsbai * 10 + blueNums * 100 + blueNumsshi ) + "□"
														qianweired = (redNumsbai * 10 + redNums * 100 + redNumsbshi) + "□"
														compareQian(redNumsbai * 100 + redNums * 1000 + redNumsbshi * 10,
															blueNumsbai * 100 + blueNums * 1000 + blueNumsshi * 10)
													}
												}
											}
										} else {
											qianweiblue = (blueNum + blueNums * 10) + "□" + "□"
											qianweired = (redNum + redNums * 10) + "□" + "□"
											compareQian(redNum * 100 + redNums * 1000, blueNum * 100 + blueNums * 1000)
										}
									}
								}
							} else {
								qianweiblue = (blueNum) + "□" + "□" + "□";
								qianweired = (redNum) + "□" + "□" + "□";
								compareQian(redNum * 1000, blueNum * 1000)
							}
						}
					}


				} else {

					if (redqianttext != "*") {
						if (blueqianttext != "*") {
							// showFunction();
						} else {

						}
					} else {

					}
				}

				// console.log(redgettext + "$" + redshitext + "$" + redbaittext + "$" + redqianttext)
				// console.log(bluegettext + "$" + blueshitext + "$" + bluebaittext + "$" + blueqianttext)

				if ((redgettext !== "*") && (redshitext !== "*") && (redbaittext !== "*") && (redqianttext !== "*") && (
						bluegettext !== "*") && (blueshitext !== "*") && (bluebaittext !== "*") && (blueqianttext !== "*")) {
					// if (complete == 1) {
					// 	console.log("111111")
					// 	compareCurrent();
					// } 
					// if (complete == 0){
					// 	console.log("00000")
					// 	complete = 1;
					// }

				}

			}

			function compareQian(redNums, blueNums) {
				redNum = redNums;
				blueNum = blueNums;

				if (redNums > blueNums) {
					alert("<br/>蓝方" + qianweiblue + " < " + "红方" + qianweired + "<br/>", clearFunction);
					result = "蓝方" + qianweiblue + " < " + "红方" + qianweired;
				} else if (redNums < blueNums) {
					alert("<br/>蓝方" + qianweiblue + " > " + "红方" + qianweired + "<br/>", clearFunction);
					result = "蓝方" + qianweiblue + " > " + "红方" + qianweired;
				} else {
					alert("<br/>双方都是" + qianweiblue + ",平局" + "<br/>", clearFunction)
					result = "双方都是" + qianweiblue + ",平局";
				}

				document.getElementById("result").innerText = result;
			}

			function compareCurrent() {
				// complete = 0;
				let bluegetext = document.getElementById("bluege").innerText;
				let bluegetextNum = Number(bluegetext)

				let blueshitext = document.getElementById("blueshi").innerText;
				let blueshitextNum = Number(blueshitext)

				let bluebaitext = document.getElementById("bluebai").innerText;
				let bluebaitextNum = Number(bluebaitext)

				let blueqiantext = document.getElementById("blueqian").innerText;
				let blueqiantextNum = Number(blueqiantext)


				let redgetext = document.getElementById("redge").innerText;
				let redgetextNum = Number(redgetext)

				let redshitext = document.getElementById("redshi").innerText;
				let redshitextNum = Number(redshitext)

				let redbaitext = document.getElementById("redbai").innerText;
				let redbaitextNum = Number(redbaitext)

				let redqiantext = document.getElementById("redqian").innerText;
				let redqiantextNum = Number(redqiantext)


				let blue = blueqiantextNum * 1000 + bluebaitextNum * 100 + blueshitextNum * 10 + bluegetextNum;
				let red = redqiantextNum * 1000 + redbaitextNum * 100 + redshitextNum * 10 + redgetextNum;


				blueNum = blue;
				redNum = red;
			}

			function changeFunction() {
				if (type == 0) {
					type = 1;
					document.getElementById("mode").innerText = "切换为从千位数开始"
					document.getElementById("status").innerText = "（当前模式，从个位数开始）"
				} else {

					type = 0;
					document.getElementById("mode").innerText = "切换为从个位数开始"
					document.getElementById("status").innerText = "（当前模式，从千位数开始）"

				}
				document.getElementById("redge").innerText = "*"
				document.getElementById("redshi").innerText = "*"
				document.getElementById("redbai").innerText = "*"
				document.getElementById("redqian").innerText = "*"
				document.getElementById("bluege").innerText = "*"
				document.getElementById("blueshi").innerText = "*"
				document.getElementById("bluebai").innerText = "*"
				document.getElementById("blueqian").innerText = "*"
			}

			function showFunction() {
				if (redNum > blueNum) {
					alert("<br/>蓝方" + blueNum + " < " + "红方" + redNum + "<br/>", clearFunction);
					result = "蓝方" + blueNum + " < " + "红方" + redNum;
				} else if (redNum < blueNum) {
					alert("<br/>蓝方" + blueNum + " > " + "红方" + redNum + "<br/>", clearFunction);
					result = "蓝方" + blueNum + " > " + "红方" + redNum;
				} else {
					alert("<br/>双方都是" + redNum + ",平局" + "<br/>", clearFunction)
					result = "双方都是" + redNum + ",平局";
				}

				document.getElementById("result").innerText = result;
			}


			function clearFunction() {
				document.getElementById("redge").innerText = "*"
				document.getElementById("redshi").innerText = "*"
				document.getElementById("redbai").innerText = "*"
				document.getElementById("redqian").innerText = "*"
				document.getElementById("bluege").innerText = "*"
				document.getElementById("blueshi").innerText = "*"
				document.getElementById("bluebai").innerText = "*"
				document.getElementById("blueqian").innerText = "*"
				redNum = 0;
				blueNum = 0;
				document.getElementById("result").innerText = ""
				document.getElementById("blueButton").disabled = false;
				document.getElementById("redButton").disabled = false;
				document.getElementById("redButton").style.backgroundColor = "red"
				document.getElementById("blueButton").style.backgroundColor = "blue"
			}

			window.alert = function(msg, callback) {
				var div = document.createElement("div");
				div.innerHTML = "<style type=\"text/css\">" +
					".nbaMask { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }                                                                                                                                                                       " +
					".nbaMaskTransparent { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; }                                                                                                                                                                                            " +
					".nbaDialog { position: fixed; z-index: 5000; width: 80%; max-width: 300px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden; opacity: 1; color: white; }" +
					".nbaDialog .nbaDialogHd { padding: .2rem .27rem .08rem .27rem; }                                                                                                                                                                                                                         " +
					".nbaDialog .nbaDialogHd .nbaDialogTitle { font-size: 17px; font-weight: 400; }                                                                                                                                                                                                           " +
					".nbaDialog .nbaDialogBd { padding: 0 .27rem; font-size: 15px; line-height: 1.3; word-wrap: break-word; word-break: break-all; color: #000000; }                                                                                                                                          " +
					".nbaDialog .nbaDialogFt { position: relative; line-height: 48px; font-size: 17px; display: -webkit-box; display: -webkit-flex; display: flex; }                                                                                                                                          " +
					".nbaDialog .nbaDialogFt:after { content: \" \"; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }               " +
					".nbaDialog .nbaDialogBtn { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #09BB07; text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative; margin-bottom: 0; }                                                                       " +
					".nbaDialog .nbaDialogBtn:after { content: \" \"; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); }             " +
					".nbaDialog a { text-decoration: none; -webkit-tap-highlight-color: transparent; }" +
					"</style>" +
					"<div id=\"dialogs2\" style=\"display: none\">" +
					"<div class=\"nbaMask\"></div>" +
					"<div class=\"nbaDialog\">" +
					"    <div class=\"nbaDialogHd\">" +
					"        <strong class=\"nbaDialogTitle\"></strong>" +
					"    </div>" +
					"    <div class=\"nbaDialogBd\" id=\"dialog_msg2\">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>" +
					"    <div class=\"nbaDialogHd\">" +
					"        <strong class=\"nbaDialogTitle\"></strong>" +
					"    </div>" +
					"    <div class=\"nbaDialogFt\">" +
					"        <a href=\"javascript:;\" class=\"nbaDialogBtn nbaDialogBtnPrimary\" id=\"dialog_ok2\">确定</a>" +
					"    </div></div></div>";
				document.body.appendChild(div);

				var dialogs2 = document.getElementById("dialogs2");
				dialogs2.style.display = 'block';

				var dialog_msg2 = document.getElementById("dialog_msg2");
				dialog_msg2.innerHTML = msg;

				// var dialog_cancel = document.getElementById("dialog_cancel");
				// dialog_cancel.onclick = function() {
				// dialogs2.style.display = 'none';
				// };
				var dialog_ok2 = document.getElementById("dialog_ok2");
				dialog_ok2.onclick = function() {
					dialogs2.style.display = 'none';
					callback();
				};
			};
		</script>
	</body>
</html>
